<!-- 拖拽滑动 -->
<template>
  <div class="IncludedBgbig" :class="{'hide':isHide}" @click="goPage">
    <img src="../../assets/three/addIcon.png" alt />
    添加收录
  </div>
</template>

<script>
export default {
  name: 'defaultDrag',
  props: ['search'],
  data() {
    return {
      isHide: false,
      timer: null
    };
  },

  components: {},

  computed: {},
  mounted() {
    window.addEventListener('scroll', this.scrollFn, false);
  },
  methods: {
    scrollFn() {
      this.isHide = true;
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        this.isHide = false;
      }, 600);
    },
    goPage() {
      let that = this;
      this.$router.push({
        path: '/addIndexed',
        query: { search: that.search }
      });
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollFn);
  }
};
</script>
<style scoped lang="less">
// 实时大屏
.IncludedBgbig {
  position: fixed;
  top: 430px;
  right: 0;
  z-index: 19 !important;
  border-radius: 0.4267rem 0rem 0rem 0.4267rem;
  background-color: #fd7f2c;
  padding: 0 0.2933rem;
  box-sizing: border-box;
  line-height: 0.8533rem;
  font-size: 0.3733rem;
  color: #fff;
  transition: all linear 300ms;
  display: flex;
  &.hide {
    right: -1.9rem;
  }
  img {
    width: 0.346667rem;
    height: 0.346667rem;
    align-self: center;
    margin-right: 0.233333rem;
  }
}
</style>